<template>
  <div id="app">
    <!-- <van-popup v-model="$store.state.LOADING" get-container="body" overlay-class="loadingClass" class="loadingClass" :close-on-click-overlay="false"> -->
    <van-loading
      class="appLoading"
      v-show="$store.state.LOADING"
      size="24px"
      vertical
      type="spinner"
      color="#0099ff"
    >加载中...</van-loading>
    <!-- </van-popup> -->
    <!-- <transition name="van-slide-right"> -->
    <router-view></router-view>
    <!-- </transition> -->
  </div>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: inline-block;
  vertical-align: text-bottom;
}
#app {
  width: 100%;
  // height: 100vh;
  // overflow: hidden;
  // padding: 0 15px 0;
}
input::placeholder {
  color: #e4e4e4;
  font-size: 14px;
}
.van-nav-bar .van-icon {
  color: #2a2b2d !important;
}
.van-pull-refresh {
  height: 100%;
}
.loadingClass {
  background-color: rgba(255, 255, 255, 0.8) !important;
  z-index: 9999 !important;
}

.appLoading {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.appLoading /deep/ .van-loading__text {
  color: #0099ff;
}

// 左右滑动效果
.detail{
  // transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  top: 0!important;
  left: 0!important;
  transform: initial!important;
}
.router_view {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  padding: 0 15px 0;
}
.homeView{
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(50px, 0);
  transform: translate(50px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}
.view {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
